{extend name="layouts/main-layui-vue-index" /}
{block name="title"}{__block__}{/block}
{block name="header"}{/block}
{block name="beforeDiv"}{/block}
{block name="appDiv"}
<lay-container :fluid="true" style="padding: 10px">
    <lay-row :span="24" style="display: flex">
        <lay-col style="max-width: 400px" :xs="24">
            <lay-card shadow="hover" class="info-user">
                <div style="text-align: center">
                    <lay-avatar :src="src" radius class="user-avatar"></lay-avatar>
                    <div class="user-name">管理员</div>
                    <div class="user-briefing">孤岛高山何其多</div>
                </div>

                <lay-row>
                    <lay-icon type="layui-icon-username"></lay-icon
                    >&nbsp;&nbsp;&nbsp;资深前端工程师
                </lay-row>
                <lay-row>
                    <lay-icon type="layui-icon-cellphone"></lay-icon
                    >&nbsp;&nbsp;&nbsp;12345678900
                </lay-row>
                <lay-row>
                    <lay-icon type="layui-icon-template"></lay-icon
                    >&nbsp;&nbsp;&nbsp;组织机构
                </lay-row>

                <lay-line border-style="dashed" border-width="1px"></lay-line>
                <h1 style="margin: 10px 0">标签</h1>
                <template v-for="tag in tagsList" :key="tag.id">
                    <lay-tag style="margin: 0 6px 6px 0">
                        &nbsp;<lay-badge type="dot" :theme="tag.theme" ripple></lay-badge>
                        &nbsp;&nbsp;{{ tag.tag }}
                    </lay-tag>
                </template>
            </lay-card>
        </lay-col>
        <lay-col style="flex: 1; background-color: #fff" :xs="24">
            <lay-tab type="brief" v-model="activeTab">
                <lay-tab-item title="基本信息" id="baseInfo">
                    <div class="tab-content">
                        <lay-form
                                :model="model4"
                                ref="layFormRef4"
                                label-width="60"
                                size="sm"
                        >
                            <lay-form-item label="昵称" prop="username" required>
                                <lay-input v-model="model4.username" allow-clear></lay-input>
                            </lay-form-item>
                            <lay-form-item label="密码" prop="password" required>
                                <lay-input
                                        v-model="model4.password"
                                        type="password"
                                        allow-clear
                                ></lay-input>
                            </lay-form-item>
                            <lay-form-item label="性别" prop="sex">
                                <lay-select
                                        v-model="model4.sex"
                                        style="width: 100%"
                                        placeholder="请选择性别"
                                >
                                    <lay-select-option
                                            value="man"
                                            label="男"
                                    ></lay-select-option>
                                    <lay-select-option
                                            value="woman"
                                            label="女"
                                    ></lay-select-option>
                                </lay-select>
                            </lay-form-item>
                            <lay-form-item label="邮箱" prop="email">
                                <lay-input
                                        v-model="model4.email"
                                        type="email"
                                        allow-clear
                                ></lay-input>
                            </lay-form-item>
                            <lay-form-item label="个人简介" prop="desc">
                                <lay-textarea
                                        placeholder="还没有个人简介哦~"
                                        v-model="model4.desc"
                                        allow-clear
                                ></lay-textarea>
                            </lay-form-item>
                            <lay-form-item label="联系电话" prop="phone" required>
                                <lay-input
                                        v-model="model4.phone"
                                        type="phone"
                                        allow-clear
                                ></lay-input>
                            </lay-form-item>
                            <lay-form-item style="text-align: center">
                                <lay-button type="primary" @click="submit4">提交</lay-button>
                                <lay-button @click="clearValidate4">清除校验</lay-button>
                                <lay-button @click="reset4">重置表单</lay-button>
                            </lay-form-item>
                        </lay-form>
                    </div>
                </lay-tab-item>
                <lay-tab-item title="账号绑定" id="bindingInfo">
                    <div class="tab-content" style="max-width: unset">
                        <template v-for="item in bindingAccountList" :key="item.id">
                            <div class="account-item">
                                <div
                                        v-if="item.icon != ''"
                                        style="width: 45px; display: inline-block"
                                >
                                    <lay-icon
                                            :type="item.icon"
                                            :color="item.color"
                                            size="34px"
                                    ></lay-icon>
                                </div>
                                <div class="account-desc">
                                    <div style="color: #000000e0">{{ item.title }}</div>
                                    <div>{{ item.desc }}</div>
                                </div>
                                <div class="account-option">
                                    {{ item.option }}
                                </div>
                            </div>
                        </template>
                    </div>
                </lay-tab-item>
            </lay-tab>
        </lay-col>
    </lay-row>
</lay-container>
{/block}
{block name="afterDiv"}
<script>
    const src =
        'https://foruda.gitee.com/avatar/1677022544584087390/4835367_jmysy_1578975358.png'

    const tagsList = ref([
        {id: 1, tag: '雪', theme: 'blue'},
        {id: 2, tag: '风是从哪儿来wu', theme: ''},
        {id: 3, tag: '漫游星河', theme: 'orange'},
        {id: 4, tag: '春日之花', theme: 'green'},
        {id: 5, tag: 'Hey', theme: 'cyan'},
        {id: 6, tag: '风吹一夏', theme: ''}
    ])
    const activeTab = ref('baseInfo')

    const model4 = reactive({
        username: 'admin',
        password: '123456',
        phone: '12345678900',
        desc: '',
        sex: '',
        email: ''
    })

    const layFormRef4 = ref()

    const submit4 = function () {
        layFormRef4.value.validate(
            (isValidate, model, errors) => {
                layer.open({
                    type: 1,
                    title: '表单提交结果',
                    content: `<div style="padding: 10px"><p>是否通过 : ${isValidate}</p> <p>表单数据 : ${JSON.stringify(
                        model
                    )} </p> <p>错误信息 : ${JSON.stringify(errors)}</p></div>`,
                    shade: false,
                    isHtmlFragment: true,
                    btn: [
                        {
                            text: '确认',
                            callback(index) {
                                layer.close(index)
                            }
                        }
                    ],
                    area: '500px'
                })
            }
        )
    }

    const clearValidate4 = () => {
        layFormRef4.value.clearValidate()
    }

    const reset4 = () => {
        console.log(layFormRef4)
        layFormRef4.value.reset()
    }

    const bindingAccountList = ref([
        {
            id: 1,
            title: '密保手机',
            desc: '已绑定手机: 12345678901',
            option: '去修改',
            icon: ''
        },
        {
            id: 2,
            title: '密保邮箱',
            desc: '已绑定邮箱: email@layui-vue',
            option: '去修改',
            icon: ''
        },
        {
            id: 3,
            title: '密保问题',
            desc: '未设置密保问题',
            option: '去设置',
            icon: ''
        },
        {
            id: 4,
            title: '绑定QQ',
            desc: '当前未绑定QQ账号',
            option: '去绑定',
            icon: 'layui-icon-login-qq',
            color: '#3492ed'
        },
        {
            id: 5,
            title: '绑定微信',
            desc: '当前未绑定绑定微信账号',
            option: '去绑定',
            icon: 'layui-icon-login-wechat',
            color: '#4daf29'
        },
        {
            id: 6,
            title: '绑定微博',
            desc: '当前未绑定绑定微博账号',
            option: '去绑定',
            icon: 'layui-icon-login-weibo',
            color: '#e6162d'
        }
    ])

    vue_data = {};
    vue_setup=  {
            src,
            model4,
            tagsList,
            activeTab,
            layFormRef4,
            bindingAccountList,
            reset4,
            submit4,
            clearValidate4
        }
    methods = {
        onLoad() {
            console.log('页面初始化请求数据并加载')
        },
    };
    watch = {};
    computed = {};
    mounted = function () {
        this.onLoad();
    };
    updated = function () {
    };
    <!--只需要专注于data,method等函数就行,加载什么的都统统交给模板,当然,模板也不是万能,实在不行你可以选择覆盖appDiv,constApp自行定义app-->
</script>



<style scoped>
    .layui-tag .layui-tag-text {
        margin: 0 8px 8px 0;
    }

    .info-user {
        max-width: 400px;
        min-width: 320px;
        padding: 20px;
        margin-right: 10px;
    }

    .user-avatar {
        width: 40%;
        height: 40%;
    }

    .user-name {
        font-size: 24px;
        margin: 15px;
    }

    .user-briefing {
        color: #0006;
        font-size: 14px;
        margin-bottom: 10px;
    }

    .header-title {
        font-size: 20px;
        font-weight: 500;
        margin-top: 12px;
        margin-bottom: 20px;
    }

    .header-describe {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .tab-content {
        height: 368px;
        max-width: 500px;
        padding: 0 20px;
        background-color: #fff;
    }

    .account-item {
        display: flex;
        width: 99%;
        height: 41px;
        line-height: 43px;
        margin-right: 10px;
        padding: 12px 0;
        border-bottom: #ccc solid 1px;
    }

    .account-item:last-child {
        border-bottom: none;
    }

    .account-desc {
        flex: 1;
        color: #0006;
        line-height: 24px;
        display: inline-block;
    }

    .account-option {
        width: 45px;
        display: inline-block;
        color: var(--global-primary-color);
    }
</style>
{/block}
{block name="constApp"}{__block__}{/block}
{block name="plugins"}{/block}
{block name="mountApp"}{__block__}{/block}